<template>
  <div class="screen">
    <van-nav-bar
  title="微医甄选"
  left-arrow
  @click-left="back"
/>
<div class="top">
    <dl>
      <dt>
        <img src="../../image/a1.png" alt="">
      </dt>
      <dd>夏季防晒</dd>
    </dl>
    <dl>
      <dt>
        <img src="../../image/a2.png" alt="">
      </dt>
      <dd>面部护理</dd>
    </dl>
    <dl>
      <dt>
        <img src="../../image/a3.png" alt="">
      </dt>
      <dd>母婴呵护</dd>
    </dl>
    <dl>
      <dt>
        <img src="../../image/a4.png" alt="">
      </dt>
      <dd>头发护理</dd>
    </dl>
    <dl>
      <dt>
        <img src="../../image/a5.png" alt="">
      </dt>
      <dd>家庭清洁</dd>
    </dl>
    <dl>
      <dt>
        <img src="../../image/a6.png" alt="">
      </dt>
      <dd>健康食品</dd>
    </dl>
    <dl>
      <dt>
        <img src="../../image/a7.png" alt="">
      </dt>
      <dd>口腔健康</dd>
    </dl>
    <dl>
      <dt>
        <img src="../../image/a8.png" alt="">
      </dt>
      <dd>营养补剂</dd>
    </dl>
    <dl>
      <dt>
        <img src="../../image/a9.png" alt="">
      </dt>
      <dd>超值优惠</dd>
    </dl>
    <dl>
      <dt>
        <img src="../../image/a10.png" alt="">
      </dt>
      <dd>热门推荐</dd>
    </dl>
</div>
<div class="menu">
  <img src="../../image/a11.png" alt="" class="im1">
  <img src="../../image/a11.png" alt="" class="im2">
  <img src="../../image/a11.png" alt="" class="im3">
  <span>品牌自营</span>
  <span>超值抵扣</span>
  <span>无忧售后</span>
</div>
<div class="photo">
  <img src="../../image/a12.png" alt="" style="width: 100%;height: 100%;">
</div>
<div class="hot">
  <button>热卖榜单</button>
</div>
<div class="bottom">
<homeGoods />
</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import instance from '../axios/index';
import { useRouter } from 'vue-router'
import { useCounterStore } from '../pinia/index';
import homeGoods from '../components/home/homeGoods.vue'
const store:any = useCounterStore()
const router = useRouter()
const back = () => {
  router.back()
}
const list:any=ref([])
instance.post('/api/orderform').then((res:any)=>{
  list.value=res.data.data
})
</script>

<style scoped>
.screen{
    width: 100%;
    height: 100%;
    background: #f8f8f8;
}
.top{
  width: 100%;
  height: 1.9rem;

}
dl{
  width: .6rem;
  height: .6rem;
  display: inline-block;
  margin-left: .13rem;
  margin-top: .2rem
}
dt{
  width: 0.5rem;
  height: 0.5rem;
  padding-left: .05rem;
  padding-left: .05rem;
  img{
    width: 100%;
    height: 100%;
  }
}
dd{
  width: .6rem;
  font-size: .13rem;
    margin-top: .05rem;
}
.menu{
  width: 100%;
  height: 0.2rem;
  position: relative;
  margin-top: .1rem;
}
.menu span{
  float: left;
  width: 1rem;
  border-right: .01rem solid #ccc;
  text-align: center;
  z-index: 1;
  color: #b6bacb;
  margin-left: .23rem;
}
.im1{
  position: absolute;
  left: .17rem;
}
.im2{
  position: absolute;
  left: 1.4rem;
}
.im3{
  position: absolute;
  right: 0.9rem;
  border: none;
}
.photo{
  width: 3.5rem;
  height: 2rem;
  margin-top: .2rem;
  margin-left: .15rem;
  border-radius: .2rem;
  img{
    border-radius: .2rem;
  }
}
.hot{
  width: 100%;
  height: .5rem;
  background: #ffffff;
  margin-top: .2rem;
}
.hot button{
  width: 1.5rem;
  height: 0.4rem;
  color: #fff;
  margin-top: .05rem;
  margin-left: .1rem;
  border: none;
  background: orange;
  border-radius: .5rem;
}
.bottom{
  width: 100%;
  height: 100%;
  margin-top: .2rem;
}
</style>
